<template>
	<div class="head-box">
		<div class="logo-box">
			<img :src="logoImg" alt="">
			<span>太原市政经营</span>
		</div>
		<div class="year-pick-box">
			<span class="curr-province">当前区域：{{currProvince}}</span>
			<el-date-picker v-model="currYear" type="year" placeholder="选择年" @change="changeYear">
			</el-date-picker>
			<span>年度选择</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: "HeadNav",
		props: {
			province:{
				type:String,
				default:""
			}
		},
		watch:{
			province:function(val){
				this.currProvince = val;
			}
		},
		data() {
			return {
				logoImg: require("@/common/imgs/logo.jpg"),
				currYear: new Date(),
				currProvince:""
			}
		},
		created() {
			this.currProvince = this.province
		},
		methods: {
			changeYear() {
				this.$set('setCurrYear',this.currYear)
			},
		}
	};
</script>
<style scoped lang="less">
	.head-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height:64px;
		padding:0 54px;
		box-sizing: border-box;
		background: #ffffff;

		.logo-box {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			img{
				width: 32px;
				height: 32px;
				border-radius:50%;
			}
			span{
				margin-left:20px;
			}
		}

		.year-pick-box {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			.curr-province{
				margin-right:20px;
			}
			span {
				margin-left:20px;
			}
		}
	}
</style>
